<template>
<div class="checkbox">
   <el-checkbox class="checkbox-total" :indeterminate="isIndeterminate"  v-model="memberCheckAll"  @change="baseAllChange">{{rawData.name}}</el-checkbox>
   <el-checkbox-group  v-model="allData[field]" @change="baseAuthorityChange">
      <el-checkbox  v-for="member in rawData.child_list" :label="member.id" :key="member.id" :value="member.id">{{member.name}}</el-checkbox>
   </el-checkbox-group>
</div>
</template>
<script>
export default {
  props: {
    allData: {
      type: Array,
      default: new Array()
    },
    rawData: Object | Array,
    totalData: Object | Array,
    isAll: Boolean,
    field: String
  },
  data() {
    return {
      memberOptions: [],
      item: [],
      isIndeterminate: true,
      memberCheckAll: false,
      isItemAll: false
    };
  },
  methods: {
    baseAuthorityChange(select) {
      let checkedCount = select.length;
      this.memberCheckAll = checkedCount === this.memberOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.memberOptions.length;
    },

    baseAllChange(select) {
      this.allData[this.field] = select ? this.memberOptions : [];
      this.isIndeterminate = false;
    },
    setData(val) {
      for (var i = 0; i < val.length; i++) {
        if (isNoEmpty(val[i].child_list)) {
          this.setData(val[i].child_list);
        } else {
          var selectData = this.totalData;
          for (var k = 0; k < selectData.length; k++) {
            if (val[i].id == selectData[k]) {
              this.item.push(selectData[k]);
            }
          }
        }
      }
    }
  },
  computed: {},
  watch: {
    isAll(curVal, oldVal) {
      if (curVal) {
        this.allData[this.field] = this.memberOptions;
      } else {
        this.allData[this.field] = [];
      }

      this.baseAuthorityChange(this.allData[this.field]);
    }
  },
  mounted() {
    let options = [];
    let member_list = this.rawData.child_list;
    for (let i = 0; i < member_list.length; i++) {
      options.push(member_list[i].id);
    }

    this.memberOptions = options;
    this.baseAuthorityChange(this.allData[this.field]);
  },
  created() {
    this.allData[this.field] = [];
    this.setData(this.rawData.child_list);
    this.allData[this.field] = this.item;
  }
};
</script>

<style scoped>
.checkbox {
  display: flex;
}

.checkbox .el-checkbox.checkbox-total {
  color: black;
  font-size: 16px;
}
</style>

